@charset "UTF-8";
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #d49210;
}

.brand-swiper {
  --cont-left: 8.25%;
  width: 100vw;
  height: 100vh;
}
.brand-swiper .swiper-slide {
  position: relative;
  font-size: var(--f-size-18);
  background: #000;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-swiper .swiper-slide .brand-title {
  width: 271px;
  position: absolute;
  right: var(--fixed-horizontal-prop);
  bottom: calc(var(--fixed-vercital-prop) + 70px);
  z-index: 10;
  font-family: "AlibabaPuHuiTiH";
  font-size: var(--title-font-size);
  line-height: 1.2667;
}
.brand-swiper .swiper-slide .brand-title .en {
  margin-bottom: 0.3em;
}
.brand-swiper .swiper-slide .brand-title .cn {
  display: inline-block;
  border-bottom: 6px #fff solid;
  padding-bottom: 0.3em;
  margin-bottom: 0.25em;
}
.brand-swiper .swiper-slide .brand-title .project-name {
  font-size: inherit;
}
.brand-swiper .swiper-slide .brand-title.black {
  color: #000;
}
.brand-swiper .swiper-slide .brand-title.black .cn {
  border-bottom-color: #000;
}
.brand-swiper .swiper-slide .brand-content {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  width: 310px;
  height: 560px;
  overflow: hidden;
  padding: 40px 25px;
  box-sizing: border-box;
  border: 3px rgba(255, 255, 255, 0.75) solid;
  position: absolute;
  left: var(--cont-left);
  z-index: 12;
}
.brand-swiper .swiper-slide .brand-content h3 {
  font-size: var(--f-size-24);
  color: var(--main-color);
  font-weight: bold;
  padding-bottom: 15px;
}
.brand-swiper .swiper-slide .brand-content ul {
  max-height: calc(100% - 48px - 72px);
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.brand-swiper .swiper-slide .brand-content ul::-webkit-scrollbar {
  width: 5px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.125);
}
.brand-swiper .swiper-slide .brand-content ul::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--main-color); /* 滚动条样式 */
}
.brand-swiper .swiper-slide .brand-content ul li {
  font-weight: 300;
  position: relative;
  padding-left: 10px;
  margin-bottom: 10px;
  line-height: 25.2px;
}
.brand-swiper .swiper-slide .brand-content ul li a {
  display: block;
  transition: transform 0.275s linear;
}
.brand-swiper .swiper-slide .brand-content ul li a:hover {
  transform: translateX(10px);
}
.brand-swiper .swiper-slide .brand-content ul li:last-child {
  margin-bottom: 0;
}
.brand-swiper .swiper-slide .brand-content ul li::before {
  content: "";
  width: 1px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 4px;
  z-index: 1;
}
.brand-swiper .swiper-slide .brand-content .arrow-right-circle {
  margin-top: 20px;
  opacity: 0.875;
}
.brand-swiper .swiper-slide .peak {
  background: url("../images/brand/peak.png?v=4a0054b") no-repeat top center;
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 9;
}
.brand-swiper .swiper-slide .peak .archway {
  width: 372px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -186px;
  margin-top: -211px;
}
.brand-swiper .swiper-slide .FT-circle {
  width: 560px;
  transform-origin: center center;
  position: absolute;
  z-index: 7;
}
.brand-swiper .swiper-slide .FT-circle:after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 2%;
  top: 2%;
  background: #fbd78e;
  border-radius: 50%;
  background-image: -webkit-radial-gradient(center center, circle contain, #fbd78e 0%, #c8cc9b 25%, #fbd78e 40%, #c8cc9b 80%, transparent 100%);
  box-shadow: 0 0 50px rgba(251, 220, 153, 0.8);
  opacity: 0.4;
  transform: scale(1);
  animation: FTCircleAni 5s linear infinite;
  -webkit-animation: FTCircleAni 5s linear infinite;
}
.brand-swiper .swiper-slide.brand-item-bg11 {
  background-position: center top;
}
.brand-swiper .swiper-slide.brand-item-bg1 {
  background-image: url("../images/brand/1.jpg?v=50354e3");
}
.brand-swiper .swiper-slide.brand-item-bg2 {
  background-image: url("../images/brand/2.jpg?v=7b93cea");
}
.brand-swiper .swiper-slide.brand-item-bg3 {
  background-image: url("../images/brand/3.jpg?v=661eeeb");
}
.brand-swiper .swiper-slide.brand-item-bg4 {
  background-image: url("../images/brand/4.jpg?v=699955b");
}
.brand-swiper .swiper-slide.brand-item-bg5 {
  background-image: url("../images/brand/5.jpg?v=a97abeb");
}
.brand-swiper .swiper-slide.brand-item-bg6 {
  background-image: url("../images/brand/6.jpg?v=8d44347");
}
.brand-swiper .swiper-slide.brand-item-bg7 {
  background-image: url("../images/brand/7.jpg?v=f1a4796");
}
.brand-swiper .swiper-slide.brand-item-bg8 {
  background-image: url("../images/brand/8.jpg?v=8f47542");
}
.brand-swiper .swiper-slide.brand-item-bg9 {
  background-image: url("../images/brand/9.jpg?v=469387f");
}
.brand-swiper .swiper-slide.brand-item-bg10 {
  background-image: url("../images/brand/10.jpg?v=aab9fc6");
}
.brand-swiper .swiper-slide.brand-item-bg11 {
  background-image: url("../images/brand/11.jpg?v=a94ab86");
}
.brand-swiper .swiper-slide.brand-item-bg12 {
  background-image: url("../images/brand/12.jpg?v=39ec9d8");
}
.brand-swiper .swiper-slide.brand-item-bg13 {
  background-image: url("../images/brand/13.jpg?v=776e0bf");
}
.brand-swiper .swiper-slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.autoplay-progress {
  width: 54px;
  height: 54px;
  position: absolute;
  right: calc(var(--fixed-horizontal-prop) + 271px - 54px);
  bottom: calc(var(--fixed-vercital-prop) + 70px + 210px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
}
.autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke: #fff;
  fill: none;
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}

.autoplay-progress svg.circle {
  stroke-width: 3px;
  stroke-dashoffset: 125.6;
}

.autoplay-progress svg.circle-bg {
  stroke-width: 1px;
  opacity: 0.2;
  stroke-dashoffset: 0;
}

.arrow-btn-prev,
.arrow-btn-next {
  width: 44px;
  height: 44px;
  background-size: 12px 12px !important;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.275s linear;
}
.arrow-btn-prev.swiper-button-disabled,
.arrow-btn-next.swiper-button-disabled {
  opacity: 0.5;
}
.arrow-btn-prev.swiper-button-disabled:hover,
.arrow-btn-next.swiper-button-disabled:hover {
  opacity: 0.5;
}
.arrow-btn-prev:hover,
.arrow-btn-next:hover {
  opacity: 1;
}

.arrow-btn-prev {
  background-image: url("../images/arrow-l.png?v=eea66ff");
}

.arrow-btn-next {
  background-image: url("../images/arrow-r.png?v=bd57755");
}

.swiper-navigation-bar {
  position: absolute;
  bottom: calc(var(--fixed-vercital-prop) - 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  align-items: center;
}
.swiper-navigation-bar .pagination-box {
  display: flex;
}
.swiper-navigation-bar .pagination-box ul {
  position: relative;
  width: 30px;
}
.swiper-navigation-bar .pagination-box ul li {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  font-weight: bold;
}
.swiper-navigation-bar .pagination-box .total {
  width: 30px;
  text-align: center;
  opacity: 0.7;
}

.brand-detail-content {
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  padding-right: 10px;
}
.brand-detail-content::-webkit-scrollbar {
  width: 4px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.25);
}
.brand-detail-content::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(255, 220, 151, 0.65); /* 滚动条样式 */
}
.brand-detail-content h3 {
  font-family: "AlibabaPuHuiTiH";
  font-size: var(--f-size-33);
  text-align: center;
}
.brand-detail-content h4 {
  margin-top: 30px;
  font-weight: bold;
  font-size: var(--f-size-24);
}
.brand-detail-content p {
  text-align: justify;
  font-size: var(--f-size-18);
  font-weight: 300;
  padding: 5px 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.conic {
  position: relative;
  z-index: 0;
  width: 300px;
  height: 520px;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
}

.conic::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 240%;
  height: 200%;
  background-color: rgba(0, 0, 0, 0.36);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(transparent, var(--main-color), transparent 30%);
  -webkit-animation: rotate 4s linear infinite;
  animation: rotate 4s linear infinite;
}

.conic::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background-color: #000;
  border-radius: 5px;
}

@media screen and (max-width: 1460px) {
  .brand-swiper .swiper-slide .brand-content {
    height: 460px;
    margin-top: 20px;
  }
}
@media screen and (max-width: 768px) {
  .brand-swiper .swiper-slide {
    flex-direction: column;
  }
  .brand-swiper .swiper-slide .brand-title {
    width: 80vw;
    position: static;
  }
  .brand-swiper .swiper-slide .brand-title img {
    max-width: 135px;
  }
  .brand-swiper .swiper-slide .brand-content {
    width: 80vw;
    position: static;
    height: auto;
    padding: 25px 20px 15px 20px;
    margin-top: -10%;
    margin-bottom: 20px;
  }
  .brand-swiper .swiper-slide .brand-content ul {
    max-height: 100%;
  }
  .autoplay-progress {
    width: 48px;
    height: 48px;
    right: calc(var(--fixed-horizontal-prop) + 135px - 48px);
    bottom: calc(var(--fixed-vercital-prop) + 40px + 110px);
  }
  .brand-detail-content h4 {
    margin-top: 15px;
  }
}
@media screen and (max-width: 480px) {
  .autoplay-progress {
    right: 10vw;
  }
}